<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/11/25
  Time: 12:01
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>登录页面</title>
    <script src="/js/jquery.js"></script>
  <style>
    div {
      width: 400px;
      margin: 1em auto;
      padding: 10px;
      background: #eee;
      text-align: center;
    }
    label {
      display: flex;
    }
    label span {
      width: 150px;
    }
  </style>

    <script type="text/javascript">
        // 页面加载完成之后
        $(function () {
            // 给验证码的图片绑定单击事件
            $("#code_img").click(function () {
                // 在事件响应的 function 函数中有一个 this 对象。这个 this 对象，是当前正在响应事件的 dom 对象
                // src 属性表示验证码 img 标签的图片路径。它可读，可写
                // alert(this.src);
                // 在验证后面加了一个当前时间
                this.src = "/kaptcha.jpg?d" + new Date();
            });
        })
    </script>
</head>
<body>

  <div>
    <h3>登录页面</h3>
<%--    ${pageContext.request.contextPath} 是绝对路径--%>
    <form action="${pageContext.request.contextPath}/book/login" method="post">
      <a href="/book/register">没有用户？去注册</a><br><br>
      <label>
        <span>用户名</span>
        <input name="username">
      </label><br>
      <label>
        <span>密码</span>
        <input type="password" name="password">
      </label><br>
        <label>
            <span>验证码</span>
            <input type="text" name="code" style="width: 80px">&nbsp;&nbsp;&nbsp;
            <img id="code_img" src="/kaptcha.jpg" style="width: 80px; height: 28px;">
        </label><br>
      <button>登录</button>
    </form>

<%--    a 标签跳转主页面--%>
    <a href="/book/list">返回首页</a>
  </div>

<%--  页脚--%>
<%@include file="/footer.jsp"%>
</body>
</html>
